<template>
  <div class="container">
	  <!--头部区域 -->
	  <div class="head">
		  <div class="head-box">
			  <div class="logo">
				  <a href="http://localhost:8080/#/">
					  <img src="../assets/ifelogo.png" style="width: 200px;" alt="logo">
				  </a>
			  </div>
			  <div class="navbar">
				 <div class="navitem" ><router-link :to="{ path: '/head' }"><span>首页</span></router-link></div>
				 <div class="navitem"><router-link :to="{ path: '/course' }"><span>所有课程</span></router-link></div>
				 <div class="navitem"><router-link :to="{ path: '/note' }"><span>精选笔记</span></router-link></div>
				  <div class="navitem"><router-link :to="{ path: '/rank' }"><span>学霸榜单</span></router-link></div>
				   <div class="navitem"><a target="_blank" href="https://tieba.baidu.com/f?kw=%E7%99%BE%E5%BA%A6%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2&ie=utf-8"><span>学院贴吧</span></a></div>
				  <div class="navitemBtn"><router-link :to="{ path: '/head' }"><div><span>登录</span></div></router-link></div>
			  </div>
		  </div>
	  </div>
	  <!-- 主题内容区域 -->
	  <div class="center">
		  <!-- 路由占位符 -->
		  <router-view></router-view>
	  </div>
	  <!-- 尾部区域 -->
	  <div class="footer">
		  <div class="foot-wrapper">
			  <p class="first"><span class="contact">IFE微信公众号：</span><span class="footer-content footer-mg">baidu_ife</span><span class="contact">IFE微博：<a target="_blank" class="footer-content" href="http://weibo.com/u/5568860641?topnav=1&wvr=6&topsug=1">Baidu前端技术学院</a></span></p>
			  <p class="friend-link"><span class="note footer-text">友情链接:</span><a class="footer-mg" target="_blank" title="百度EFE前端团队" href="http://efe.baidu.com">百度EFE</a><a class="footer-mg" target="_blank" href="http://campus.baidu.com/">百度校园</a><a class="footer-mg" target="_blank" href="http://talent.baidu.com/external/baidu/campus.html">百度校园招聘</a><a class="footer-mg" target="_blank" href="http://bit.baidu.com/?fr=ife/">百度技术学院</a></p>
			   <p class="friend-link"><span class="note footer-text">资源:</span><a class="footer-mg" target="_blank" title="百度EFE前端团队" href="https://github.com/baidu-ife">IFE2015</a><a class="footer-mg" target="_blank" href="http://ife.baidu.com/2016/static/index.html">IFE2016</a><a class="footer-mg" target="_blank" href="http://ife.baidu.com/2017">IFE2017</a></p>
			   <P class="footer-text footer-content" style="display: inline;">©2017 Baidu 使用百度前必读 意见反馈 京ICP证030173号</P>
		  </div>
	  </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
  }
}
</script>
<style>
	.container{
		height: auto;
		box-shadow: 0 0 10px aliceblue;
		background: #F5F5F5;
	}
	 .head{
		 position: relative;
		  background-color: white;
		  height: 80px;
		 width: 100%;
		 box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
	 }
	 .head-box{
		 width: 60%;
		 padding: 0 1%;
		 height: 100%;
		 margin: 0 auto;
	 }
	 .head .logo{
		 width: 230px;
		 height: 100%;
		 float: left;
	 }
	 .head .logo img{
		 width: 215px;
		 height: 40px;
		 margin-top: 20px;
	 }
	 .navbar{
		 height: 100%;
	 }
	 .navbar .navitem{
		
		 width: 9%;
		 height: 78px;
		 float: left;
		 text-align: center;
		 line-height: 80px;
		 font-size: 14px;
		 font-weight: 400;
		 color: #777;
		 transition:all .1s;
	 }
	 .navbar .navitem:hover{
		 font-size: 15px;
		 font-weight: 600;
	 }
	 .navbar .navitemBtn{
		 width: 114px;
		 height: 78px;
		 float: right;
	 }
	 .navbar .navitemBtn:hover div{
	 		 background-color: rgb(42,139,86);
			 
	 }
	 .navbar .navitemBtn  div{
	 		 width: 100%;
	 		 height: 44px;
			 margin-top: 18px;
			 border-radius: 4px;
			 background-color: #38BA72;
	 		 float: right;
	 }
	 
	 
	 .center{
		 min-height: 500px;
		 height: auto;
		 padding-bottom:40px;
	 }
	 .footer{
		 position: relative;
		 margin: 0;
		 height: 199px;
		 margin-top: 20px;
		 background: gray;
		 background-image: url(http://ife.baidu.com/2018/asset/common/img/footer_ea5753d.png);
		 background-size: 100% 100%;
	 }
	 .foot-wrapper{
		 position: absolute;
		 text-align: center;
		 top: 25%;
		 width: 100%;
		 color: #fff;
		 font-size: 12px;
	 }
	 .foot-wrapper p{
	 		 margin: 0 0 10px;
	 }
	 .foot-wrapper a{
	 		 display: inline;
			 text-decoration:none !important;
			  color: #fff !important;
			  font-size: 12px;
			  opacity: .8;
	 }
	 .first{
		 font-size: 12px;
		 color: white;
	 }
	 .footer-content{
		 color: #fff;
		 font-size: 12px;
		 opacity: .8;
	 }
	 .contact{
		 margin: 22px auto 0;
	 }
	 .footer-mg{
		 margin-right: 15px;
	 }
	 .friend-link{
	 }
	 .footer-text{
		 display: inline-block;
		 margin-right: 15px;
		 width: 88px;
	 }
</style>

